<template>
    <div class="menu-container">
        <div v-for="(info,index) in temp" :key="index" class="menu-item" :class="{'article-active': isarticle === info.path    }"  >
           <router-link :to="{name:info.path}"   > 
           <span class="iconfont" :class="info.icon">
            </span>
            {{info.name}}
        </router-link>
        </div>
        
         <a :href="'Mailto:'+Info.mailto"  class="mailto" ><span class="iconfont icon-youxiang" ></span>{{Info.mailto}}</a>
         <a href="https://beian.miit.gov.cn/" target="_blank" class="menu-out" >{{Info.recrod}}</a>
    </div>
    
</template>

<script>
import {Info,gethomeInfo} from "../../compostion/useHomeNav"
import{onBeforeMount,ref,watch,onMounted}from 'vue'
import {useRoute} from 'vue-router'
import {baseUrl} from '../../config'
export default{
    setup() {
    let temp = ref([]);
    let isarticle = ref(null);
    const route = useRoute();
   
     onBeforeMount(async ()=>{
          await gethomeInfo();
          temp.value = Info.Nav;
          document.querySelector("link").href = baseUrl + Info.icon;
    })
    watch(()=>route.path,(path)=>{
       
       isarticle.value = path.substr(1,7);
       if(path.substr(1,7) == '') isarticle.value = 'home' 
      

    },{
        immediate:true
    })
    

        return{
          temp,
          Info,
          isarticle
         
        }
    }
}
</script>



<style lang="less" scoped>
@import url("../../assets/css/iconfont.css");
a{
    display: block;
    width: 100%;
    height: 20px;
    text-decoration: none;
    cursor: pointer;
    color: rgb(165, 161, 161);
    padding: 20px;
    
    span{
        padding: 0 20px 0 20px;
    }
    &:hover{
              color:#fff;
              
              
           }
}
.menu-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.router-link-active,.article-active{
   background-color: #2479cc;
   color: #fff;
   a{
       transform: translateX(20px);
   }
}
.menu-out{
    transform: translateY(130px);
    text-align: center;
    font-size: 15px;
    
}
.menu-item{
    border-radius: 5px;
    overflow: hidden;
    width: 95%;
}
.mailto{
    width: 80%;
}
</style>